<template>
  <div class="userpart">
    <div class="header">用户管理</div>
    <div class="div-header">
      <div>
        <el-input
          style="width: 200px"
          v-model="name"
          placeholder="请输入内容"
        ></el-input>
        <el-button type="primary" @click="souFun">查询</el-button>
        <el-button type="primary" @click="chongFun">重置</el-button>
      </div>
      <div>
        <el-button type="primary" @click="addFun">新增用户</el-button>
      </div>
    </div>
    <el-table  :data="tableData" style="width: 100%">
      <el-table-column fixed='left' prop="userName" label="用户名称" width="180">
      </el-table-column>
      <el-table-column prop="nickName" label="真实姓名" width="180">
      </el-table-column>
      <el-table-column prop="sex" label="用户性别" width="180">
        <template  #default="scope">{{scope.row.sex===0?'男':'女'}}</template>
      </el-table-column>
      <el-table-column prop="role" label="用户角色" width="180">
        <template  #default="scope">{{scope.row.role===0?'管理员':'普通用户'}}</template>
      </el-table-column>
      <el-table-column prop="userEmail" label="用户邮箱" width="180">
      </el-table-column>
      <el-table-column prop="mobile" label="手机号" width="180">
      </el-table-column>
      <el-table-column prop="job" label="岗位" width="180">
      </el-table-column>
      <el-table-column prop="deptId" label="部门" width="180">
        <template  #default="scope">{{scope.row.deptId ? (scope.row.deptId.deptName==''?'':scope.row.deptId.deptName) : ''}}</template> 
      </el-table-column>
      <el-table-column prop="state" label="在职状态" width="180">
        <template  #default="scope">{{scope.row.state==0?'离职':scope.row.state==1?'在职':'试用期'}}</template> 
      </el-table-column>
      <el-table-column prop="lastLoginTime" label="创建时间" width="180">
        <template  #default="scope">
          {{$filters.currencyUSD(scope.row.lastLoginTime)}}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >编辑</el-button
          >
          <el-button type="text" size="small" @click="handelClick(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-size="limit"
      prev-text='上一页'
      next-text='下一页'
      layout="total, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <el-dialog v-model="form.dialogFormVisible">
      <div class="header">{{form.title}}</div>
      <el-form :model="form">
        <el-form-item>
          <el-input
            v-model="form.userName"
            placeholder="请输入用户名称"
            @blur="blurFun"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item :class="isShow===true?'q1':'q2'">
          <el-input
            v-model="form.userPwd"
            placeholder="请输入员工密码"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="form.job"
            placeholder="请输入员工岗位"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="form.nickName"
            placeholder="请输入真实姓名"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="form.userEmail"
            placeholder="用户邮箱"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="form.mobile"
            placeholder="手机号码"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            disabled
            v-model="form.role"
            placeholder="用户角色"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="form.deptId" placeholder="--所在部门--">
            <el-option @click="seletFun(v)" v-for="(v,i) in depan" :key="i" :label="v.deptName" :value="v.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="form.state" placeholder="--在职状态--">
            <el-option @click="seletFun1(v)" v-for="(v,i) in arr" :key="i" :label="v.label" :value="v.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="form.title==='添加用户'?addOkFun():addOkFun1()">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import {ref} from "vue";
import { ElMessage } from 'element-plus'
import {list,dele,sele,addlist,elmit} from '../../api/user'

export default {
  data() {
    return {
      tableData: [],
      form: {
        dialogFormVisible: false,
        title:'',
        mobile: "",
        userEmail: "",
        userName: "",
        userPwd: "",
        nickName: "",
        state: "",
        deptId: "",
        role:1,
        job:''
      },
      depan: [],
      arr:[{
        value:'0',
        label:'离职'
      },{
        value:'1',
        label:'在职'
      },{
        value:'2',
        label:'试用期'
      }],
      formLabelWidth: "120px",
      page:1,
      limit:3,
      total:0,
      name:'',
      isShow:true
    };
  },
  methods: {
    // 点击搜索
    souFun(){
      this.listFun()
    },
    // 点击重置
    chongFun(){
      this.name=''
      this.listFun()
    },
    // 失焦
    blurFun(){
      if(this.form.title=='添加用户'){
        this.tableData.forEach((v,i)=>{
          if(v.userName==this.form.userName){
            ElMessage.error({
              message:'用户名重复,请重新输入',
              type:'error',
              duration:1000
            });
            this.form.userName=''
          }
        })
      }
    },
    // 编辑
    handleClick(row) {
      let arr={...row}
      this.isShow=true
      this.form.title='编辑用户'
      this.form.dialogFormVisible=true
      this.form.userName=arr.userName
      this.form.userPwd=arr.userPwd
      this.form.userEmail=arr.userEmail
      this.form.mobile = arr.mobile
      this.form.nickName = arr.nickName;
      this.form.state = arr.state;
      this.form.deptId = arr.deptId;
      this.form.role=1
      this.form.job=arr.job
      this.form._id=arr._id
    },
    // 下拉选择部门
    seletFun(val){
      console.log(val);
      // this.form.deptId=val._id
    },
    //下拉选择状态
    seletFun1(val){
      this.form.state=val.value
    },
    // 删除
    handelClick(row){
      let id = {...row}
      dele({id:id._id}).then((res)=>{
        console.log(res);
        if(res.status==200){
          ElMessage.success({
            message: '删除成功',
            type: 'success',
            duration:1000
          });
          this.listFun()
        }else{
          ElMessage.error({
            message:'删除失败',
            type:'error',
            duration:1000
          });
        }
      })
    },
    //点击页码
    handleCurrentChange(val) {
      this.page=val
      this.listFun()
    },
    // 添加用户
    addFun() {
      this.isShow=false
      this.form.dialogFormVisible = true;
      this.form.title='添加用户'
      this.form.mobile = "";
      this.form.userEmail = "";
      this.form.userName = "";
      this.form.nickName = "";
      this.form.state = "";
      this.form.deptId = "";
      this.form.role=1
      this.form.userPwd=''
      this.form.job=''
    },
    // 添加遮罩层确定按钮
    addOkFun() {
      addlist({...this.form}).then((res)=>{
        if(res.status==200){
          ElMessage.success({
            message: '注册成功',
            type: 'success',
            duration:1000
          });
          this.form.dialogFormVisible=false
          this.listFun()
        }else{
          ElMessage.error({
            message:'注册失败',
            type:'error',
            duration:1000
          });
          this.form.dialogFormVisible=false
        }
      })
    },
    // 编辑确定按钮
    addOkFun1() {
      let arr={...this.form}
      elmit({
        id:arr._id,
        mobile:arr.mobile,
        userEmail:arr.userEmail,
        userName:arr.userName,
        nickName:arr.nickName,
        state:arr.state,
        deptId:arr.deptId,
        role:1,
        userPwd:arr.userPwd,
        job:arr.job
      }).then((res)=>{
        if(res.status==200){
          ElMessage.success({
            message: '编辑成功',
            type: 'success',
            duration:1000
          });
          this.form.dialogFormVisible=false
          this.listFun()
        }else{
          ElMessage.error({
            message:'编辑失败',
            type:'error',
            duration:1000
          });
          this.form.dialogFormVisible=false
        }
      })
    },
    // 获取数据
    listFun(){
      list({page:this.page,limit:this.limit,userName:this.name}).then((res)=>{
        if(res.status==200){
          this.tableData=res.data
          this.total=res.count
        }
      })
    },
    // 下拉
    selFun(){
      sele().then((res)=>{
        if(res.status==200){
          this.depan=res.data
        }
      })
    }
  },
  created() {
    this.listFun()
    this.selFun()
  },
  setup() {
    return {
      input: ref(""),
    };
  },
};
</script>

<style lang="scss" scoped>
@import '../../style/scss.scss';
.userpart {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: white;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 10px;
  .header {
    width: 100%;
    height: 44px;
    border-left: $border-left;
    display: flex;
    align-items: center;
    margin-bottom: 14px;
    padding: 0 10px;
    box-sizing: border-box;
    font-size: 20px;
    font-weight: bold;
    border-bottom: 2px dashed #f1f1f1;
  }
  .div-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
}
.q1{
  display: none;
}
.q2{
  display: block;
}
</style>